// Vue 应用的入口文件

// 引入必要的库和模块
import { createApp } from 'vue'
import { createPinia } from 'pinia'

// 引入主应用组件
import App from '@/App.vue'
// 引入路由配置
import router from '@/router'

// 引入 Arco Design 组件库及其样式
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'

// 引入主样式文件
import '@/assets/styles/main.css'

// 引入自定义组件
import LoadingSpinner from '@/components/LoadingSpinner.vue'

// 引入自定义的通知方法
import { useNotification } from '@/composables/useNotification'

// 引入自定义的图标插件
import useIcons from '@/composables/useIcons'

// 引入权限指令
import { setupPermission } from '@/composables/usePermission'

// 引入路由权限控制
import { setupRouterPermission } from './router/permission'

/**
 * 创建 Vue 应用实例
 */
const app = createApp(App)

// 创建 Pinia 实例，用于管理全局状态
const pinia = createPinia()

// 挂载 Pinia 和路由器到应用实例
app.use(pinia)
app.use(router)
app.use(ArcoVue)

// 全局注册 LoadingSpinner 组件
app.component('LoadingSpinner', LoadingSpinner)

// 绑定自定义通知方法到全局属性，供组件使用
app.config.globalProperties.$notify = useNotification()

// 注册自定义的图标插件
app.use(useIcons)

// 注册权限指令
setupPermission(app)

// 确保在 router 注册后设置路由权限控制
setupRouterPermission(router)

// 将应用实例挂载到 DOM 中 id 为 'app' 的元素
app.mount('#app')
